<template>
	<view class="mailList_container">
		<view class="" style="height: 174rpx;">
			<view class="mail_two" style="position: fixed; z-index: 99;">
				<view class="mail_text" style="font-weight: 700;">
					通讯录
				</view>
			</view>
		</view>
		<!-- 搜索框 -->
<!-- 		<view class="" style="height: 110rpx;">
			<view class="" style="width: 100%; position: fixed; z-index: 9;background-color: #fff;">
				<u-search placeholder="快速搜索联系人" v-model="keyword" :show-action=false margin='30rpx'></u-search>
			</view>
		</view> -->
		<!-- tab栏 -->
		<view class="" style="height: 76rpx;">
			<view class="" style="width: 100%; position: fixed; z-index: 99;">
				<u-tabs :list="list" :is-scroll="false" :current="current" bar-width="90" @change="change"></u-tabs>
			</view>
		</view>
<!-- 		<view class="" style="height: 26rpx; background-color: #f2f2f2;">

		</view> -->
		<!-- A-Z -->
		<view class="contacts">
			<!-- 组织机构 -->
			<!-- 折叠面板 -->
<!-- 			<u-collapse hover-class="none"
				:head-style="{'margin':'20rpx 30rpx 0 20rpx','font-weight':'600','border-bottom':'1px solid #f5f5f5'}"
				v-if="current==1">
				<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">
					<u-index-list :sticky="false" :scrollTop="scrollTop">
						<view class="" style="display: flex;">
							<u-index-anchor :use-slot="true">
								<text class="anchor-text">{{item.id}}</text>
							</u-index-anchor>
							<u-line :hair-line="false" color="#f5f5f5" length="92%" style="padding-top: 28rpx;" />
						</view>
						<view class="list-cell">
							<view class="">
								<image src="../../static/workOrder/Group1035.png" mode=""
									style="width: 80rpx;height: 80rpx;"></image>
							</view>
							<view class="name">
								<view class="">
									{{item.name1}}
								</view>
								<view class="">
									{{reversedMessage}}11111111111111
								</view>
							</view>
						</view>
						<view class="list-cell">
							<view class="">
								<image src="../../static/workOrder/Group1035.png" mode=""
									style="width: 80rpx;height: 80rpx;"></image>
							</view>
							<view class="name">
								<view class="">
									{{item.name2}}
								</view>
								<view class="">
									{{reversedMessage}}111111111111
								</view>
							</view>
						</view>
						<view class="list-cell">
							<view class="">
								<image src="../../static/workOrder/Group1035.png" mode=""
									style="width: 80rpx;height: 80rpx;"></image>
							</view>
							<view class="name">
								<view class="">
									{{item.name3}}
								</view>
								<view class="">
									{{reversedMessage}}1111111111111
								</view>
							</view>
						</view>
						<view class="" style="display: flex;">
							<u-index-anchor :use-slot="true">
								<text class="anchor-text">{{item.id2}}</text>
							</u-index-anchor>
							<u-line :hair-line="false" color="#f5f5f5" length="92%" style="padding-top: 28rpx;" />
						</view>
						<view class="list-cell">
							<view class="">
								<image src="../../static/workOrder/Group1035.png" mode=""
									style="width: 80rpx;height: 80rpx;"></image>
							</view>
							<view class="name">
								<view class="">
									{{item.name4}}
								</view>
								<view class="">
									{{reversedMessage}}11111111111
								</view>
							</view>
						</view>
						<view class="list-cell">
							<view class="">
								<image src="../../static/workOrder/Group1035.png" mode=""
									style="width: 80rpx;height: 80rpx;"></image>
							</view>
							<view class="name">
								<view class="">
									{{item.name5}}
								</view>
								<view class="">
									{{reversedMessage}}111111111111111
								</view>
							</view>
						</view>
						<view class="list-cell">
							<view class="">
								<image src="../../static/workOrder/Group1035.png" mode=""
									style="width: 80rpx;height: 80rpx;"></image>
							</view>
							<view class="name">
								<view class="">
									{{item.name6}}
								</view>
								<view class="">
									{{reversedMessage}}11111111111111
								</view>
							</view>
						</view>
					</u-index-list>

				</u-collapse-item>
			</u-collapse> -->
			<!-- 同事 -->
						<!-- <u-index-list :sticky="false" :scrollTop="scrollTop" v-if="current==1"> -->
				<view v-for="(item, index) in indexList2" :key="index" v-if="current==1&&user_type">
<!-- 					<view class="" style="display: flex;">
						<u-index-anchor :use-slot="true">
							<text class="anchor-text">{{item.id}}</text>
						</u-index-anchor>
						<u-line :hair-line="false" color="#f5f5f5" length="92%" style="padding-top: 28rpx;" />
					</view> -->
					<view class="list-cell">
						<view class="">
							<image src="../../static/workOrder/Group1035.png" mode=""
								style="width: 80rpx;height: 80rpx;"></image>
						</view>
						<view class="" style="margin: 0 30rpx;width: 100%;display: flex;justify-content: space-between;align-items: center;">
							<view class="name">
								<view class="">
									{{item.staffName}}
								</view>
								<view class="">
									{{item.staffPhone}}
								</view>
							</view>
							<u-button type="primary" size="mini" @click="addCollection(item.staffId)">收藏</u-button>
						</view>
					</view>
				</view>
			<!-- </u-index-list> -->
			<!-- 收藏 -->
			<!-- <u-index-list :sticky="false" :scrollTop="scrollTop" v-if="current==0"> -->
				<view v-for="(item, index) in indexList" :key="index" v-if="current==0&&user_type">
<!-- 					<view class="" style="display: flex;">
						<u-index-anchor :use-slot="true">
							<text class="anchor-text">{{item.id}}</text>
						</u-index-anchor>
						<u-line :hair-line="false" color="#f5f5f5" length="92%" style="padding-top: 28rpx;" />
					</view> -->
					<view class="list-cell">
						<view class="">
							<image src="../../static/workOrder/Group1035.png" mode=""
								style="width: 80rpx;height: 80rpx;"></image>
						</view>
						<view class="" style="margin: 0 30rpx;width: 100%;display: flex;justify-content: space-between;align-items: center;">
							<view class="name">
								<view class="">
									{{item.staffName}}
								</view>
								<view class="">
									{{item.staffPhone}}
								</view>
							</view>
							<u-button type="primary" size="mini" @click="removeCollection(item.staffId)">移除收藏</u-button>
						</view>
					</view>
<!-- 					<view class="list-cell">
						<view class="">
							<image src="../../static/workOrder/Group1035.png" mode=""
								style="width: 80rpx;height: 80rpx;"></image>
						</view>
						<view class="" style="margin: 0 30rpx;width: 100%;display: flex;justify-content: space-between;">
							<view class="name">
								<view class="">
									{{item.name2}}
								</view>
								<view class="">
									{{reversedMessage}}1111111111
								</view>
							</view>
							<u-button type="primary" size="mini">移除收藏</u-button>
						</view>
					</view>
					<view class="list-cell">
						<view class="">
							<image src="../../static/workOrder/Group1035.png" mode=""
								style="width: 80rpx;height: 80rpx;"></image>
						</view>
						<view class="" style="margin: 0 30rpx;width: 100%;display: flex;justify-content: space-between;">
							<view class="name">
								<view class="">
									{{item.name3}}
								</view>
								<view class="">
									{{reversedMessage}}1111111111
								</view>
							</view>
							<u-button type="primary" size="mini">移除收藏</u-button>
						</view>
					</view> -->
				</view>
			<!-- </u-index-list> -->
			<!-- 业主 -->
			<!-- <u-index-list :sticky="false" :scrollTop="scrollTop" v-if="current==2"> -->
				<view v-for="(item, index) in indexList3" :key="index" v-if="current==2&&user_type">
<!-- 					<view class="" style="display: flex;">
						<u-index-anchor :use-slot="true">
							<text class="anchor-text">{{item.id}}</text>
						</u-index-anchor>
						<u-line :hair-line="false" color="#f5f5f5" length="92%" style="padding-top: 28rpx;" />
					</view> -->
					<view class="list-cell">
						<view class="">
							<image :src="item.userAvatar" mode=""
								style="width: 80rpx;height: 80rpx;"></image>
						</view>
						<view class="" style="margin: 0 30rpx;width: 100%;display: flex;justify-content: space-between;align-items: center;">
							<view class="name">
								<view class="">
									{{item.userName}}
								</view>
								<view class="">
									{{item.userPhone}}
								</view>
							</view>
							<u-button type="primary" size="mini" @click="removeAddress(item.userPhone)">移除通讯录</u-button>
						</view>
					</view>
				</view>
			<!-- </u-index-list> -->
		</view>
		<!-- 提示去登录 -->
		<u-modal v-model="show" show-cancel-button="true" cancel-color="#2979ff" :content="content" @confirm="confirm">
		</u-modal>
		<!-- template部分，u-tabBar放在页面展现最后 -->
		<!-- <u-tabbar :list="tabBarList" :active-color="activeColor" :inactive-colot="inactiveColor"></u-tabbar> -->
		<!-- tabBar -->
		<tabBar v-if="flag"></tabBar>
		<!-- 弹框 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import tabBar from "@/components/tabBar/tabBar.vue"
	import {
		mapGetters
	} from 'vuex'
	export default {
		components:{
			tabBar
		},
		data() {
			return {
				keyword: '',
				scrollTop: 0,
				// 模态框参数
				show: false,
				content: '当前未登录，是否去登录',
				// 收藏 
				indexList: [{
					id: 'A',
					name: "A-客服",
					name2: "阿豪",
					name3: "阿牛",
				}, {
					id: 'B',
					name: "B-客服",
					name2: "八德",
					name3: "伯力",
				}],
				// 同事
				indexList2: [{
					id: 'A',
					name: "A-客服",
					name2: "阿豪",
					name3: "阿牛",
				}, {
					id: 'B',
					name: "B-客服",
					name2: "八德",
					name3: "伯力",
				}],
				// 业主
				indexList3: [{
					id: 'Y',
					name: "余女士 (Y23#-2单元-504室)",
				}],
				// 折叠面板
				itemList: [{
					id: 'A',
					id2: 'B',
					name1: "A-客服",
					name2: "阿豪",
					name3: "阿牛",
					name4: "B-客服",
					name5: "八德",
					name6: "伯力",
					head: "物业部门\xa0\xa0(6)",
					// body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
					open: true,
					disabled: true
				}, {
					id: 'A',
					id2: 'B',
					name1: "A-客服",
					name2: "阿豪",
					name3: "阿牛",
					name4: "B-客服",
					name5: "八德",
					name6: "伯力",
					head: "物业部门\xa0\xa0(6)",
					// body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
					open: false,
				}, {
					id: 'A',
					id2: 'B',
					name1: "A-客服",
					name2: "阿豪",
					name3: "阿牛",
					name4: "B-客服",
					name5: "八德",
					name6: "伯力",
					head: "物业部门\xa0\xa0(6)",
					// body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					open: false,
				}],
				// tab栏参数
				list: [{
					name: '收藏'
				}, {
					name: '同事'
				}, {
					name: '业主',
				}],
				current: 0,
				activeColor: "#55a0ff", // 选中时的颜色
				inactiveColor: "#000", // 未选中时的颜色
				msg: '',
								user_type: '',
								flag:''
			}
		},
		computed: {
			...mapGetters([
				'tabBarList', // 获取展示的tabBar列表
			]),
			// 计算属性的 getter
			reversedMessage: function() {
				// `this` 指向 vm 实例
				return this.msg
			}
		},
		onLoad() {
			// this.getcoursetype()
			this.user_type = uni.getStorageSync("userType")
			this.loginId = uni.getStorageSync("setModel")
			// 同事列表
			this.Approved()
			// 收藏列表
			this.Collection()
			// 业主列表
			this.owners()
		},
		onShow() {
			// 控制模态框
			// this.show=true
			this.flag = true
		},
		onHide() {
			this.flag = false
			// console.log('onHide')
		},
		methods: {
			change(index) {
				this.current = index;
				console.log(this.current)
				if(index=='0') {
					// 收藏列表
					this.Collection()
				} else if(index=='1') {
					// 同事列表
					this.Approved()
				} else {
					// 业主列表
					this.owners()
				}
			},
			// 同事列表
			Approved() {
				this.$http.get('informationInquiry/getStaffByDeptId', {
					deptId: this.loginId.deptId
				}).then(res => {
					// console.log(res, '执行人')
					// this.particulars=res.data
					this.indexList2 = res.data
					// this.list3 = this.changeKey(lists, ['value', 'label', 'staffPhone']);
				})
			},
			// 收藏列表
			Collection() {
				this.$http.get('Collect/selectList', {
					userId:this.loginId.userId
				}).then(res => {
					// console.log(res, '收藏列表')
					// this.particulars=res.data
					this.indexList = res.data
					// this.list3 = this.changeKey(lists, ['value', 'label', 'staffPhone']);
				})
			},
			// 业主列表
			owners() {
				this.$http.get('Collect/selectOrderUser', {
					userId: this.loginId.userId
				}).then(res => {
					console.log(res, '执行人')
					// this.particulars=res.data
					this.indexList3 = res.data
					// this.list3 = this.changeKey(lists, ['value', 'label', 'staffPhone']);
				})
			},
			// 移除通讯录
			removeAddress(phone) {
				this.$http.get('Collect/deleteOrderUse', {
					userId: this.loginId.userId,
					phone:phone
				}).then(res => {
					console.log(res, '移除通讯录')
					// this.particulars=res.data
					this.$refs.uToast.show({
						title: res.msg,
					})
					// 业主列表
					this.owners()
					// this.list3 = this.changeKey(lists, ['value', 'label', 'staffPhone']);
				})
			},
			// 添加收藏
			addCollection(staffId) {
				this.$http.post('Collect/insertCollectStaff', {
					userId:this.loginId.userId,
					staffId:staffId
				}).then(res => {
					// console.log(res, '收藏列表')
					this.$refs.uToast.show({
						title: res.msg,
					})
					// this.particulars=res.data
					// this.indexList2 = res.data
					// this.list3 = this.changeKey(lists, ['value', 'label', 'staffPhone']);
				})
			},
			// 移除收藏
			removeCollection(staffId) {
				this.$http.get('Collect/deleteStaffCollect', {
					userId:this.loginId.userId,
					staffId:staffId
				}).then(res => {
					// console.log(res, '移除收藏')
					this.$refs.uToast.show({
						title: '移除收藏成功',
					})
					// 收藏列表
					this.Collection()
					// this.particulars=res.data
					// this.indexList2 = res.data
					// this.list3 = this.changeKey(lists, ['value', 'label', 'staffPhone']);
				})
			},
			// 点击确认按钮时触发
			confirm() {
				this.openUrl('/pagesB/sign/sign')
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>
	.mailList_container {
		.mail_two {
			overflow: hidden;
			width: 100%;
			height: 174rpx;
			background: linear-gradient(-99.24deg, #57E1FF 0%, #75F7FF 20%, #0D92FF 100%);
			// background-image: linear-gradient(#020202, #2e576e);

			.mail_text {
				margin-left: 50rpx;
				margin-top: 96rpx;
				color: #fff;
				font-size: 40rpx;
			}
		}

		.list-cell {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 14px;
			line-height: 24px;
			background-color: #fff;

			.name {
				// margin-left: 30rpx;
			}
		}

		/deep/.contacts {
			.u-index-anchor {
				background-color: #fff;
			}

			/deep/.data-v-5bead7d8 {
				// .u-collapse-body {
				// }
			}
		}
	}
</style>
